<template>
	<view class="help-content">
		<view class="list-content">
			<view class="list-msg">您好:<br/>
			我是您的专属就业秘书，您可以给我发送语音和文字，我会帮您找{{identity==1?'岗位':'人力资源'}}。<br/>您可以发：我想找个服务员的{{identity==1?'工作':'员工'}}。</view>
			<block v-for="(item,index) in messageList" :key="index">
				<view class="message-item" v-if="item.type==='mine'">
					<view class="message-content">{{item.message}}</view>
					<image :src="item.avatar" class="avatar"></image>
				</view>
				<view class="position-list" v-else-if="item.type=='position'&&item.position.length>0">
					<view style="text-align: center;">为您匹配到以下{{identity==1?'岗位':'人力资源'}}</view>
					<swiper style="width: 100%" indicator-dots="true" v-if="identity==1">
						<swiper-item v-for="(item1,index1) in item.position">
							<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item1.id)"
								class="list-item">
								<view class="list-info">
									<view class="title">{{item1.jobTitle}}</view>
									<view class="address">酒泉 / {{item1.jobAddress}}</view>
									<view class="label-block">
										<view class="label-item" v-for="label in item1.label">{{label}}</view>
									</view>
									<view class="wage" v-if="item1.minSalary">{{item1.minSalary}}-{{item1.maxSalary}}元</view>
									<view class="wage" v-else>面议</view>
								</view>
								
							</view>
						</swiper-item>
					</swiper>
					<swiper style="width: 100%;margin-top: 30rpx;" indicator-dots="true" v-else-if="identity==2">
						<swiper-item @click="goView(item1.id)" v-for="(item1,index1) in item.position" :key="item1.id">
							<view class="person-item">
								<view class="info-block">
									<image :src="item1.user.faceUrl?item1.user.faceUrl:imageUrl+'/job_hunting/home/Mr.png'"
										class="user-photo"></image>
									<view class="info">
										<view class="name">{{item1.realName}}</view>
										<view class="others" style="display: flex;flex-direction: row;">
											<view class="other-item">{{item1.birthday}}岁/</view>
											<view class="other-item" v-if="item1.education"> {{item1.education}} /
											</view>
											<view class="other-item" v-else> {{item1.educationText}} /</view>
											<view class="other-item" v-if="item1.workTimeStart=='0年'">
												经验小于1年 /
											</view>
											<view class="other-item" v-else>{{item1.workTimeStart}}经验 / </view>
											<view class="other-item"> {{item1.jobText}}</view>
										</view>
									</view>
								</view>
								<view class="job-block">
									<view class="job">
										<view class="job-content">
											<view class="jobList">
												<text class="darkgray" style="margin-right:10rpx;">想找</text>
												{{item1.regArea}} / {{item1.postName}} /
												{{item1.salaryMin}}-{{item1.salaryMax}}元
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="position-list" v-else-if="item.type=='news'&&item.news.length>0">
					<view style="text-align: center;">为您匹配到以下政策</view>
					<swiper style="width: 100%;margin-top: 30rpx;" indicator-dots="true" v-if="item.news&&item.news.length>0">
						<swiper-item @click="navigate('/page_other/article/detail?id='+item1.id)" v-for="(item1,index1) in item.news" :key="item1.id">
							<view class="article-item" >
								<view class="info">
									<view class="title">{{item1.title}}</view>
									<view class="time">发布日期：{{item1.crt_time}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</block>
		</view>
		<view class="ctrl-content" v-if="noticeActive==1">
			<image @click="toActive(2)" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/characters.png" style="height: 60rpx;width: 60rpx;"></image>
			<view class="TUI-message-input-main" @longpress="handleLongPress" @touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
				style="display: flex; justify-content: center; font-size: 32rpx; font-family: PingFangSC-Regular;margin-left: 60rpx;">
				<text>{{ text }}</text>
			</view>
		</view>
		<view class="ctrl-content" v-else>
			<image @click="toActive(1)" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/language.png" style="height: 60rpx;width: 60rpx;"></image>
			<input v-model="keyWord" confirm-type="search" @confirm="search" type="text" placeholder-class="font-color"  style="background-color: #fff; bfont-size: 32rpx; margin-left: 60rpx;width: 500rpx;height: 70rpx;"/>
		</view>
		<view class="record-modal" v-if="popupToggle" @longpress="handleLongPress" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="wrapper"><view class="modal-loading"></view></view>
			<view class="modal-title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	import {uploadFile} from '@/api/file.js'
	import config from '@/config.js'
	import {
		voiceInputApi
	} from '@/api/user.js'
	export default {
		data() {
			return {
				messageList:[
				],
				recorderManager:null,
				noticeActive: 1,
				title: ' ',
				startPoint: 0,
				notShow: false,
				isShow: true,
				recordTime: 0,
				recordTimer: null,
				popupToggle: false,
				isRecording: false,
				canSend: true,
				text: '按住说话',
				keyWord: '',
				imageUrl:'',
			}
		},
		mounted(){
			this.imageUrl = this.globalConfig.imageUrl;
		},
		computed:{
			identity(){
				return this.$store.getters.identity
			}
		},
		beforeMount() {
			this.recorderManager = uni.getRecorderManager();
			this.recorderManager.onStop(res => {
				// 兼容 uniapp 打包app，duration 和 fileSize 需要用户自己补充
				// 文件大小 ＝ (音频码率) x 时间长度(单位:秒) / 8
				let msg = {
					duration: res.duration ? res.duration : this.recordTime * 1000,
					tempFilePath: res.tempFilePath,
					fileSize: res.fileSize ? res.fileSize : ((48 * this.recordTime) / 8) * 1024
				};
				uni.hideLoading();
				// 兼容 uniapp 语音消息没有duration
				if (this.canSend) {
					if (msg.duration < 1000) {
						uni.showToast({
							title: '录音时间太短',
							icon: 'none'
						});
					} else {
						uni.showLoading({
							title:'正在识别',
							mask:true
						})
						console.log(res)
						// res.tempFilePath 存储录音文件的临时路径
						uni.uploadFile({
							url:config.requestUrl+'/voiceMatching',
							filePath:res.tempFilePath,
							header: { "Content-Type": "multipart/form-data" },
							name:'file',
							formData:{identity:this.identity},
							success: (e) => {
								uni.hideLoading()
								let data=JSON.parse(e.data);
								if(data.code==200){
									this.messageList.push({message:data.data.msg,avatar:this.$store.getters.user.faceUrl,type:'mine'});
									
									if((data.data.list&&data.data.list.length>0)||(data.data.customerList&&data.data.customerList.length>0)||(data.data.newsList&&data.data.newsList.length>0)){
										this.showToast('为您匹配到以下信息')
										if(data.data.list&&data.data.list.length>0){
											this.messageList.push({position:data.data.list,type:'position'});
										}
										if(data.data.customerList&&data.data.customerList.length>0){
											this.messageList.push({position:data.data.customerList,type:'position'});
										}
										if(data.data.newsList&&data.data.newsList.length>0){
											this.messageList.push({news:data.data.newsList,type:'news'});
										}
									}else{
										this.showToast('暂无匹配的信息')
									}
								}else{
									this.showToast(data.msg)
								}
							},
							fail:()=> {
								uni.hideLoading()
								this.showToast('录音上传失败')
							}
						})
					}
				}
			
				this.setData({
					startPoint: 0,
					popupToggle: false,
					isRecording: false,
					canSend: true,
					title: ' ',
					text: '按住说话'
				});
			});
		},
		methods: {
			goView(id) {
				uni.navigateTo({
					url: '/page_other/resume/index?type=view&id=' + id
				})
			},
			navigate(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			},
			toActive(e)
			{
				this.noticeActive = e;
			},
			search()
			{
				if(this.keyWord)
				{
					uni.showLoading({
						title:'正在匹配',
						mask:true
					})
					voiceInputApi({
						keyWord: this.keyWord,
						identity:this.identity
					}).then((res) => {
						uni.hideLoading()
							this.messageList.push({message:this.keyWord,avatar:this.$store.getters.user.faceUrl,type:'mine'});
							this.keyWord = '';
							if((res.list&&res.list.length>0)||(res.customerList&&res.customerList.length>0)||(res.newsList&&res.newsList.length>0)){
								
								this.showToast('为您匹配到以下信息')
								if(res.list&&res.list.length>0){
									this.messageList.push({position:res.list,type:'position'});
								}
								if(res.customerList&&res.customerList.length>0){
									this.messageList.push({position:res.customerList,type:'position'});
								}
								if(res.newsList&&res.newsList.length>0){
									this.messageList.push({news:res.newsList,type:'news'});
								}
							}else{
								this.showToast('暂无匹配的信息')
							}
						
					})
				}

			},
			handleLongPress(e) {
				this.recorderManager.start({
					duration: 60000,
					// 录音的时长，单位 ms，最大值 600000（10 分钟）
					sampleRate: 44100,
					// 采样率
					numberOfChannels: 1,
					// 录音通道数
					encodeBitRate: 192000,
					// 编码码率
					format: 'aac' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
				});
				this.setData({
					startPoint: e.touches[0],
					title: '正在录音',
					// isRecording : true,
					// canSend: true,
					notShow: true,
					isShow: false,
					isRecording: true,
					popupToggle: true,
					recordTime: 0,
					text: '抬起停止',
				});
				this.recordTimer = setInterval(() => {
					this.recordTime++;
					if(this.recordTime==50){
						uni.vibrateLong()
					}
					if(this.recordTime>=50){
						this.text=`${60-this.recordTime}后停止录音`
					}
				}, 1000);
			},
			
			// 录音时的手势上划移动距离对应文案变化
			handleTouchMove(e) {
				if (this.isRecording) {
					if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 100) {
						this.setData({
							text: '抬起停止',
							title: '松开手指，取消发送',
							canSend: false
						});
					} else if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 20) {
						this.setData({
							text: '抬起停止',
							title: '上划可取消',
							canSend: true
						});
					} else {
						this.setData({
							text: '抬起停止',
							title: '正在录音',
							canSend: true
						});
					}
				}
			},
			// 手指离开页面滑动
			handleTouchEnd() {
				this.setData({
					startPoint: 0,
					popupToggle: false,
					isRecording: false,
					title: ' ',
					text: '按住说话'
				});
				clearInterval(this.recordTimer);
				uni.hideLoading();
				this.recorderManager.stop();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.help-content {
		width: 100vw;
		height: 100vh;

		.list-content {
			height: calc(100% - 160rpx);
			width: 100%;
			overflow-y: scroll;
			padding: 0 30rpx;
				.list-msg{
					margin-top: 100rpx;
					width: 100%;
					background: #FFF0D6;
					padding: 30rpx 30rpx;
					border-radius: 10px;
					box-shadow: 0 0 10px 0 #efefef;
					color: #FC9B12;
				}
			.message-item {
				width: calc(100% - 100rpx);
				margin: 30rpx 0;
				margin-left: 100rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;

				.avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 5px;
					margin-left: 30rpx;
				}

				.message-content {
					max-width: calc(100% - 100rpx);
					padding: 30rpx;
					border: 1px solid rgba(0, 110, 255, 0.30);
					background: rgba(0, 110, 255, 0.10);
					border-radius: 10px 2px 10px 10px;
					white-space: pre-wrap;
					word-break: normal;
					font-size: 28rpx;
				}
			}
		}

		.ctrl-content {
			height: 160rpx;
			padding: 30rpx 40rpx;
			padding-bottom: 60rpx;
			background: #f1f1f1;
			display: flex;
			flex-direction: row;
			align-items: center;
			.TUI-message-input-main{
				width: 500rpx;
				height: 70rpx;
				background: #fff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.list-item {
			width: calc(100% - 60rpx);
			margin: 30rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-bottom: 20rpx;
			box-shadow: 0 0 10px 0 #dfdfdf;

			.detail-info {
				width: 180rpx;
				height: 200rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.name {
					width: 110rpx;
					font-size: 24rpx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					text-indent: 15rpx;
				}

				.photo {
					width: 70rpx;
					height: 70rpx;
					border-radius: 100%;
					background: #efefef;
				}

				.apply-btn {
					border: 1px solid #FE7526;
					border-radius: 8rpx;
					color: #FE7526;
					font-size: 24rpx;
					padding: 8rpx 28rpx;
					position: relative;
					left: 30rpx;
				}
			}

			.list-info {
				display: flex;
				flex-direction: column;

				>view {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.title {
					color: #000;
					font-weight: bold;
					font-size: 34rpx;
					width: 350rpx;
				}

				.address {
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}

				.label-block {
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: left;
					margin-top: 20rpx;

					.label-item {
						padding: 8rpx 20rpx;
						background: #F5F6F8;
						color: #999;
						margin: 0 10rpx 20rpx 0;
					}
				}

				.wage {
					color: #FE7526;
					font-size: 36rpx;
					font-weight: bold;

					.unit {
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}
		}
	}
	.record-modal {
		height: 300rpx;
		width: 60vw;
		background-color: #000;
		opacity: 0.8;
		position: fixed;
		top: 670rpx;
		z-index: 9999;
		left: 20vw;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}
	
	.record-modal .wrapper {
		display: flex;
		height: 200rpx;
		box-sizing: border-box;
		padding: 10vw;
	}
	
	.record-modal .wrapper .modal-loading {
		opacity: 1;
		width: 40rpx;
		height: 16rpx;
		border-radius: 4rpx;
		background-color: #006fff;
		animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
	}
	
	.modal-title {
		text-align: center;
		color: #fff;
	}
	@keyframes loading {
		0% {
			transform: translate(0, 0)
		}
	
		50% {
			transform: translate(30vw, 0);
			background-color: #f5634a;
			width: 40px;
		}
	
		100% {
			transform: translate(0, 0);
		}
	}
	.person-item {
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		box-shadow:0 0 10px 0 #efefef;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
	
		.info-block,
		.job-block {
			width: 100%;
			padding: 20rpx 0;
		}
	
		.info-block {
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.user-photo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
	
			.info {
				width: calc(100% - 120rpx);
				margin-left: 20rpx;
	
				.name {
					font-weight: bold;
					font-size: 34rpx;
				}
	
				.others {
					display: flex;
					flex-direction: row;
	
					.other-item {
						font-size: 26rpx;
						color: #999;
						margin-top: 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
	
			}
		}
	
		.job-block {
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.job {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
	
				.label-block {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
	
					.label-item {
						background: #F4F5F7;
						color: #999;
						font-size: 24rpx;
						padding: 4rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
	
				.job-content {
					width: 100%;
					font-size: 26rpx;
	
					.jobList {
						width: 100%;
					}
				}
			}
	
			.btn-block {
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.btn {
					padding: 6rpx 26rpx;
					border: 1px solid #FE7526;
					border-radius: 6rpx;
					color: #FE7526;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.person-item:last-child {
		margin-bottom: 0;
	}
	.article-item {
		height: 100%;
		width: 100%;
		padding:30rpx;
		background: #fff;
		border-radius: 12px;
		display: flex;
		flex-direction: row;
		box-shadow: 0 0 10px 0 #efefef;
		.cover-photo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			background: #efefef;
		}
	
		.info {
	
			height: 100%;
	
			.title {
				font-size: 30rpx;
			}
	
			.time {
				font-size: 28rpx;
				color: #999;
				padding-top: 40rpx;
			}
		}
	}
</style>
